---
title: 'Examples'
order: 5
---

import ClayLayout from '@clayui/layout';
import ClayLink from '@clayui/link';

## What is Storybook and how do we use it?

Storybook is a user interface development environment and playground for UI components.
We use it to create components independently and showcase components interactively in an isolated development environment.
A Storybook is a collection of stories. Each story represents a single visual state of a component.

## How you can leverage Storybook to make using Clay easier

Whenever you have doubts about how a component is implemented or used, checking out its stories
is a great way of getting valuable information about how we envisioned that component be used.

You can use Storybook for inspiration, as well as guidelines, for your use case as well as getting insight into the composition of a component.

## Examples/Demos

Here are our demos we have in Storybook that utilize Clay components showcasing some common use cases.

<ul class="c-pl-3 list-unstyled">
	<li>
		<a
			href="https://storybook.clayui.com/?path=/story/demos-templates--list-page"
			rel="noreferrer noopener"
			target="_blank"
		>
			List Page
		</a>
	</li>
	<li>
		<a
			href="https://storybook.clayui.com/?path=/story/demos-templates--files-page"
			rel="noreferrer noopener"
			target="_blank"
		>
			Files Page
		</a>
	</li>
	<li>
		<a
			href="https://storybook.clayui.com/?path=/story/demos-templates--form-page"
			rel="noreferrer noopener"
			target="_blank"
		>
			Form Page
		</a>
	</li>
	<li>
		<a
			href="https://storybook.clayui.com/?path=/story/demos-templates--table-rows-with-drag-and-drop"
			rel="noreferrer noopener"
			target="_blank"
		>
			Table Rows Drag & Drop
		</a>
	</li>
	<li>
		<a
			href="https://storybook.clayui.com/?path=/story/demos-templates--table-columns-with-drag-and-drop"
			rel="noreferrer noopener"
			target="_blank"
		>
			Table Columns Drag & Drop
		</a>
	</li>
	<li>
		<a
			href="https://storybook.clayui.com/?path=/story/demos-templates--drag-and-drop"
			rel="noreferrer noopener"
			target="_blank"
		>
			List Drag & Drop
		</a>
	</li>
</ul>
